<template>
    <main>
        <section class="main_wrap">
            <section class="user_title">
                <i class="iconfont icon-denglu"></i>
                <h3>注册/登录</h3>
            </section>
            <section class="user">
                <form  enctype='multipart/form-data'>
                    <div class="input">
                        <div class="input_wrap">
                           
                            <input type="text" v-model.trim="userName" @keyup.enter="signin" name="userName" placeholder="用户名">
                        </div>
                        <div class="input_wrap">
                           
                            <input type="password" v-model="password" @keyup.enter="signin" name="password" placeholder="密码">
                        </div>
                        <div class="input_wrap">
                            
                            <input type="text"  v-model="inputYzm" @keyup.enter="signin" placeholder="验证码">
                            <img :src="yzmurl" alt="">
                            <!-- <p>点击更换</p> -->
                        </div>
                    </div>
                    <div class="submit" @click="signin">立即注册/登录</div> 
               </form>
            </section>
        </section> 
    </main>
</template>

<script>

import {yzmurl,getyzm,login} from "@/config/axios.js"
export default {
    name: 'login',
    data () {
        return {
          
            userName: '',
            password: '',
            yzm:"",
            inputYzm:"",
            yzmurl:""
         
        }
    },
	created(){
		
		getyzm().then(res=>{
			console.log(res.data)
			this.yzm=res.data.data
			this.yzmurl=yzmurl+"?v="+new Date().getTime()
		})
	},
    methods:{
    	test(){
    		alert("sss")
    	},
        // 登录 
        signin(){
           var username=this.username;
           var password=this.password;
           if(username==""||password==""){
           		alert("请输入账号或者密码")
           			return 0;
           }
           if(this.checkYzm()==false){
           	alert("验证码不正确")
           	return 0;
           }
           var data={userName:username,password:password}
           login(data).then(res=>{
           		console.log(res.data)
           		if(res.data.msg=="注册成功"){
           			sessionStorage.setItem("islogin",true)
           			this.$router.push("/me")
           			
           		}else{
           			alert("注册失败")
           		}
           })
        },
        checkYzm(){
        	if(this.inputYzm==this.yzm){
        		return true
        	}else{
        		
        		this.inputYzm=""
        		return false;
        	}
        	
        }
   
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.main_wrap{
    // position: absolute;
    // top: 50%;
    // width: 100%;
    // transform: translateY(-55%)
    margin-top: 2rem;
}
.user_title{
    display:flex;
    flex-direction: column;
    align-items: center;
    i{
        color: #1ABC9C;
        font-size: 60px;
    }
    h3{
        font-size: 18px;
        color: #1ABC9C;
    }
}
.user{
    .input_wrap{
        position: relative;
        margin-top: 0.5rem;
        i{
            font-size: 30px;
            color: #1ABC9C;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%)
        }
        input{
            border:none;
            width: 100%;
            padding:0.25rem 0;
            border-top:1px solid  #1ABC9C;
            border-bottom:1px solid  #1ABC9C;
            font-size: 16px;
            padding-left: 0.7rem;
            background: transparent; 
        }
        img{
            position: absolute;
            right: 0;
            top:50%;
            transform: translateY(-50%);
            height: 90%;
        }
        p{
            position: absolute;
            top: 0;
            right: 0;
            color: #ec5051;
        }
    }
    .submit{
        width: 70%;
        background: #1ABC9C;
        padding:0.2rem 0.3rem;
        border-radius:10px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        margin:0.5rem auto;
    }
}
</style>
